<template>
  <el-form label-width="80">
    <el-form-item label="SKU名称">
      <el-input
        placeholder="请你输入SKU名字"
        size="default"
        v-model="skuParams.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input
        type="number"
        placeholder="请你输入价格"
        v-model="skuParams.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(g)">
      <el-input
        type="number"
        placeholder="请你输入重量"
        v-model="skuParams.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input
        type="textarea"
        placeholder="请你输入描述"
        v-model="skuParams.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true" label-width="70px">
        <el-form-item
          :label="item.attrName"
          v-for="(item, index) in platformArr"
          :key="item.id"
        >
          <el-select v-model="item.attrIdAndValId">
            <el-option
              :label="attrVal.valueName"
              :value="`${item.id}:${attrVal.id}`"
              v-for="(attrVal, index) in item.attrValueList"
              :key="attrVal.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item
          :label="saleAttr.saleAttrName"
          v-for="(saleAttr, index) in saleArr"
          :key="saleAttr.id"
        >
          <el-select v-model="saleAttr.saleIdAndValueId">
            <el-option
              :label="item.saleAttrValueName"
              :value="`${saleAttr.id}:${item.id}`"
              v-for="(item, index) in saleAttr.spuSaleAttrValueList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="imgArr" ref="table">
        <el-table-column width="80" type="selection"></el-table-column>
        <el-table-column label="图片">
          <template #="{ row, $index }">
            <img :src="row.imgUrl" alt="" style="width: 100px; height: 100px" />
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row, $index }">
            <el-button type="warning" size="default" v-if="row.default == 1"
              >默认图片</el-button
            >
            <el-button
              type="primary"
              size="default"
              @click="changeDefault(row)"
              v-else
              >设置默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="default" @click="save">保存</el-button>
      <el-button size="default" @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { ref, nextTick } from "vue";
//引入请求函数
import {
  reqAttrList,
  reqSpuHasSaleAttr,
  reqImgList,
  reqAddSku,
} from "../../../api/product/spu/index";
//添加SKU需要携带参数:收集数据
let skuParams = ref({
  //父组件传递过来的
  category3Id: "", //三级分类的ID
  spuId: "", //spu的ID
  tmId: "", //品牌的ID

  skuName: "", //sku的名字
  price: "", //价格
  weight: "", //重量
  skuDesc: "", //sku描述

  skuDefaultImg: "", //sku商品默认图片地址
  skuAttrValueList: [
    //收集平台属性的数据
    // {
    //   attrId: "", //平台属性的ID
    //   valueId: "", //平台属性值的ID
    // },
  ],
  skuSaleAttrValueList: [
    //销售属性的数据
    // {
    //   saleAttrId: "", //销售属性的ID
    //   saleAttrValueId: "", //销售属性值的ID
    // },
  ],
});

//存储table组件实例
let table = ref();
//取消按钮的回调
const cancel = () => {
  $emit("changeVal", 0);
};
//平台属性
let platformArr = ref([]);
//销售属性
let saleArr = ref([]);
//照片墙的数据
let imgArr = ref([]);
//子组件方法:对外暴露,发三个请求,添加SKU需要用的数据
//spu:包含三级分类ID与自身的ID
const initSkuData = async (
  c1Id: number | string,
  c2Id: number | string,
  spu
) => {
  //清空数据
  Object.assign(skuParams.value, {
    //父组件传递过来的
    category3Id: "", //三级分类的ID
    spuId: "", //spu的ID
    tmId: "", //品牌的ID

    skuName: "", //sku的名字
    price: "", //价格
    weight: "", //重量
    skuDesc: "", //sku描述

    skuDefaultImg: "", //sku商品默认图片地址
    skuAttrValueList: [
    
    ],
    skuSaleAttrValueList: [
 
    ],
  });
  platformArr.value = [];
  imgArr.value = [];
  saleArr.value = [];
  
  
  //收集三级分类ID|spu的ID|品牌ID
  skuParams.value.category3Id = spu.category3Id;
  skuParams.value.spuId = spu.id;
  skuParams.value.tmId = spu.tmId;
  //获取全部平台属性的数据
  let result = await reqAttrList(c1Id, c2Id, spu.category3Id);
  //获取销售属性
  let result1 = await reqSpuHasSaleAttr(spu.id);
  //照片墙的数据
  let result2 = await reqImgList(spu.id);
  //因为将来table默认图片排他操作,每一个图标对象，打标记
  //默认图片default = 1  ,如果不是默认图片default = 0;
  if (result2.length > 0) {
    result2.forEach((item) => {
      item.default = 0;
    });
    result2[0].default = 1;
    //默认第一张图片地址:默认图片地址
    skuParams.value.skuDefaultImg = result2[0].imgUrl;
  }
  //存储数据
  platformArr.value = result;
  saleArr.value = result1;
  imgArr.value = result2;

  //获取table组件:使用toggleRowSelection,默认第一行勾选中
  //第一个参数:row->数组里面元素
  //第二个参数:这一行是否勾选,true:代表勾选，false,代表不勾选
  //获取更新后的DOM
  nextTick(() => {
    table.value.toggleRowSelection(imgArr.value[0], true);
  });
};
//设置默认图片排他操作
const changeDefault = (row) => {
  //排他操作
  imgArr.value.forEach((item) => {
    item.default = 0;
    //先遍历table第一列全部复选框不勾选
    table.value.toggleRowSelection(item, false);
  });
  //选中的图片为默认图片
  row.default = 1;
  //收集默认图片的地址
  skuParams.value.skuDefaultImg = row.imgUrl;
  //只有选中的哪一行勾选
  table.value.toggleRowSelection(row, true);
};

//保存按钮的回调
const save = async () => {
  //整理参数
  //平台属性的数据 + for循环  + reduce
  skuParams.value.skuAttrValueList = platformArr.value.reduce((prev, next) => {
    //判断平台属性：每一个平台属性对象是否拥有attrIdAndValId
    if (next.attrIdAndValId) {
      let [attrId, valueId] = next.attrIdAndValId.split(":");
      prev.push({ attrId, valueId });
    }
    return prev;
  }, []);

  //销售属性
  skuParams.value.skuSaleAttrValueList = saleArr.value.reduce((prev, next) => {
    if (next.saleIdAndValueId) {
      let [saleAttrId, saleAttrValueId] = next.saleIdAndValueId.split(":");
      prev.push({ saleAttrId, saleAttrValueId });
    }
    return prev;
  }, []);
  //发送添加SKU请求
  try {
    //添加SKU成功
    await reqAddSku(skuParams.value);
    //提示信息
    ElMessage({
      message: "添加SKU成功",
      type: "success",
    });
    //通知父组件切换场景为0
    $emit("changeVal", 0);
  } catch (error) {
    ElMessage({
      message: "添加SKU失败",
      type: "error",
    });
  }
  //请求成功:父组件切换场景为0 + 提示文字
  //请求失败:提示文字
};
let $emit = defineEmits(["changeVal"]);
defineExpose({ initSkuData });
</script>

<style scoped>
</style>